<template>
  <view class="container">
    <!-- 标题 -->
    <view class="form-item">
      <input class="title" v-model="form.title" placeholder="标题" />
    </view>

    <!-- 截止时间 -->
    <view class="form-item">
      <picker mode="date" :value="form.endDate" @change="onDateChange">
        <view class="picker">{{ form.endDate || '请选择截止日期' }}</view>
      </picker>
      <view class="divider"></view> <!-- 细线分隔 -->
      <picker mode="time" :value="form.endTime" @change="onTimeChange">
        <view class="picker">{{ form.endTime || '请选择截止时间' }}</view>
      </picker>
    </view>

    <!-- 内容 -->
    <view class="form-item">
      <textarea v-model="form.content" placeholder="请输入活动内容（500字以内）" maxlength="500" />
      <text class="word-count">{{ form.content.length }}/500</text>
    </view>

    <!-- 活动地址 -->
   <view class="form-item">
     <text class="label">活动地址:</text>
     <view class="divider"></view> <!-- 细线分隔 -->
     <picker mode="region" @change="onRegionChange">
       <view class="picker">{{ selectLocation || '请选择省市区' }}</view>
     </picker>
      <view class="divider"></view> <!-- 细线分隔 -->
     <input v-model="form.detail" placeholder="详细地址" class="detail-input" />
   </view>
    <!-- 联系方式 -->
    <view class="form-item">
      <text class="label">联系方式：</text>
      <view class="divider"></view> <!-- 细线分隔 -->
      <input
        v-model="form.contactInfo"
        placeholder="请输入电话号码"
        class="contact-input"
      />
    </view>
    <!-- 图片上传 -->
    <view class="form-item">
      <text class="label">群二维码和图片：(图片不得多于8张！)</text>
      <button @click="chooseImage">选择图片</button>
      <view class="image-list">
        <view
          v-for="(image, index) in images"
          :key="index"
          class="image-container"
        >
          <image
            :src="image"
            mode="aspectFill"
            class="image"
          />
          <view class="delete-btn" @click="deleteImage(index)">×</view>
        </view>
      </view>
    </view>

    <!-- 提交按钮 -->
    <button class="submit-btn" @click="submitForm">提交</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        title: '', // 标题
        endDate: '', // 截止时间
        endTime: '',
        content: '', // 内容
        province: '', // 活动地址
        city:'',
        region:'',
        detail:'',
        contactInfo : '',
      },
      images: [], // 图片列表
    };
  },
  computed:{
    selectLocation(){
       // 如果省市区中有任意一个为 null 或空字符串，返回空
      if (!this.form.province || !this.form.city || !this.form.region) return '';
      return `${this.form.province} ${this.form.city} ${this.form.region}`
    }
  },
  methods: {
    // 选择截止时间（精确到分钟）
    onDateChange(e) {
      this.form.endDate = e.detail.value; // 获取选择的日期和时间
    },
    onTimeChange(e) {
      this.form.endTime = e.detail.value; // 获取选择的日期和时间
    },
    // 省市区选择变化
    onRegionChange(e) {
      const [province, city, area] = e.detail.value; // 获取省市区
      this.form.province = province
      this.form.city = city
      this.form.region = area
    },

    // 选择图片
    chooseImage() {
      uni.chooseImage({
        count: 9, // 最多选择 4 张图片
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机
        success: (res) => {
          // 将选择的图片路径保存到 images
          this.images = [...this.images, ...res.tempFilePaths]; // 修复拼写错误
          console.log('当前图片列表:', this.images);
        },
        fail: (err) => {
          console.error('选择图片失败:', err);
          uni.showToast({ title: '选择图片失败', icon: 'none' });
        },
      });
    },

    // 上传图片
    async uploadImages(activityID) {
      console.log('images' ,this.images);
      console.log('images.length', this.images.length);
      console.log('activityID', activityID);
      if (this.images.length === 0) {
        return;
      }
      if(this.images.length > 9){
        return uni.$showMsg("图片不得多于9张！")
      }
      // 使用 Promise.all 确保所有图片上传完成
      const results = await Promise.all(
        this.images.map(imagePath => this.postImage(imagePath, activityID))
      );
      // 检查上传结果
        results.forEach((result, index) => {
          if (result !== null) {
            console.log(`图片 ${index + 1} 上传成功:`, result);
          } else {
            console.error(`图片 ${index + 1} 上传失败`);
          }
        });
      
        // 如果有图片上传失败，可以提示用户
        const failedUploads = results.filter(result => result === null);
        if (failedUploads.length > 0) {
          uni.$showMsg(`${failedUploads.length} 张图片上传失败，请检查后重试`);
        } else {
          uni.$showMsg('所有图片上传成功');
        }
      
        // 图片上传完成后，清空 images
        this.images = [];
      // // 遍历图片列表，逐个上传
      // this.images.forEach((imagePath) => {
      //   console.log(imagePath,activityID);
      //   this.postImage(imagePath,activityID);
      //   });

    },
    // 删除图片
    deleteImage(index) {
      this.images.splice(index, 1); // 删除指定索引的图片
      console.log('删除后的图片列表:', this.images);
    },
    // 上传单张图片
    async postImage(imagePath,activityID) {
       try {
          // 从 imagePath 中提取文件名
          const fileName = imagePath.split('/').pop(); // 例如：'image.jpg'
      
          // 从文件名中提取文件类型
          const fileExtension = fileName.split('.').pop().toLowerCase(); // 例如：'jpg'
          const fileType = `image/${fileExtension}`; // 例如：'image/jpeg'
          console.log('activityID:', activityID);
          const token = uni.getStorageSync('token'); // 从本地存储中获取 JWT
          // 使用 uni.uploadFile 上传文件
          const [err, res] = await uni.uploadFile({
            url: `${uni.$http.baseUrl}/upload`, // 上传接口地址
            filePath: imagePath, // 文件路径
            name: 'image', // 文件对应的字段名
            formData: {
              name: fileName, // 文件名
              type: fileType // 文件类型
            },
            header: {
              'Content-Type': 'multipart/form-data',// 设置请求头
              'X-Activity-ID': activityID,
              Authorization: `${token}` // 添加 JWT
            }
          });
          
          // 处理上传结果
          console.log('上传结果:', res);
      
          if (res.statusCode === 200) {
            const res1 = JSON.parse(res.data); // 解析返回的数据

      
            if (res1.code !== 1) {         
              return uni.$showMsg();;
            }
          } else {
            uni.$showMsg('上传失败');
          }
        } catch (error) {
          console.error('上传出错:', error);
          uni.$showMsg('上传出错，请重试');
        }
    },
    // 提交表单
    submitForm() {
      if (!this.validateForm()) return;

      // 提交逻辑
      uni.showLoading({ title: '发布中...' });
      setTimeout(() => {
        this.submit();
        uni.hideLoading();
        uni.showToast({ title: '发布成功', icon: 'success' });
        this.resetForm();
      }, 2000);
    },
    async submit() {
      const { data : res } = await uni.$http.post('/activities/add', {form : this.form});
      console.log(res);
      if(res.code !== 1) uni.$showMsg();
      console.log(res.data);
      this.uploadImages(res.data);
    },
    // 表单验证
    validateForm() {
      if (!this.form.title) {
        uni.showToast({ title: '请输入标题', icon: 'none' });
        return false;
      }
      if (!this.form.endTime || !this.form.endDate) {
        uni.showToast({ title: '请选择截止时间', icon: 'none' });
        return false;
      }
      if (!this.form.content) {
        uni.showToast({ title: '请输入内容', icon: 'none' });
        return false;
      }
      if (!this.form.province || !this.form.city || !this.form.region || !this.form.detail) {
        uni.showToast({ title: '请选择活动地址', icon: 'none' });
        return false;
      }
      if(!this.form.contactInfo){
        uni.showToast({ title: '请输入联系方式', icon: 'none' });
        return false;
      }
      return true;
    },
    
    // 重置表单
    resetForm() {
      this.form = {
        title: '', // 标题
        endDate: '', // 截止时间
        endTime: '',
        content: '', // 内容
        province: '', // 活动地址
        city:'',
        region:'',
        detail:'',
      };
    },
  },
  onPullDownRefresh() {
    this.resetForm() 
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: 20px 16px; // 上下 20px，左右 16px

  .form-item {
    margin-bottom: 20px;
    align-items: center;
    .label{
      font-weight: bold;
    }
    .title {
      display: block;
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 8px;
    }

    input,
    textarea,
    .picker{
      margin-bottom: 10px; // 默认间距
      
      @media (min-width: 768px) {
        margin-bottom: 16px; // 大屏幕下增加间距
      }
    },
    .address {
      width: calc(100% - 20px); // 减去左右 padding 的总和
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 14px;
      .divider {
        height: 1px;
        background-color: #ccc;
        margin: 10px 0; // 细线分隔的上下间距
      }
    }

    textarea {
      height: 150px;
    }

    .word-count {
      display: block;
      text-align: right;
      font-size: 12px;
      color: #666;
      margin-top: 4px;
    }

    button {
      margin-top: 10px;
    }
    
    /* 图片列表 */
    .image-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: center; /* 左右居中 */
      margin-top: 10px;
    }
    
    /* 图片容器 */
    .image-container {
      position: relative;
      width: 100px; /* 图片宽度 */
      height: 100px; /* 图片高度 */
      margin: 5px; /* 图片间距 */
      border: 1px solid #ddd; /* 边框 */
      border-radius: 5px; /* 圆角 */
      overflow: hidden; /* 隐藏超出部分 */
    }
    
    /* 图片 */
    .image {
      width: 100%;
      height: 100%;
    }
    
    /* 删除按钮 */
    .delete-btn {
      position: absolute;
      top: 0;
      right: 0;
      width: 20px;
      height: 20px;
      background-color: rgba(255, 0, 0, 0.7); /* 红色背景 */
      color: white; /* 白色文字 */
      text-align: center;
      line-height: 20px;
      border-radius: 50%; /* 圆形按钮 */
      font-size: 16px;
      cursor: pointer;
    }
  }

  .submit-btn {
    margin-top: 30px;
    background-color: #007aff;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 10px;
    font-size: 16px;
    width: 100%;

    &:active {
      background-color: darken(#007aff, 10%);
    }
  }
}
</style>
